<template>
  <div class="bless-index">
      <love-swiper :data_all="album_data" class="swiper-album" ref="swiper_album"></love-swiper>
      <div class="bless-title">谢谢所有的祝福！</div>
    <pull-refresh :on-refresh="onRefresh">
      <pull-load
              @onInfiniteLoad="onInfiniteLoad"
      >
        <!-- 列表 -->
        <div class="bless-container" ref="bless_container">
          <div class="bless-item item" v-for="(item,index) in bless_list" :key="index">
            <div class="bless-item-padding">
              <div class="bless_item_head">
                <img :src="item.headimgurl" alt="">
                <h1>{{item.nickname}}</h1>
              </div>
              <div class="b_item_date">
                {{item.created_at}}
              </div>
              <div class="bless_gift" v-if="item.tag!='message'">
                <img :src="item.thumb" alt="">
                <div class="bless_gift_count">
                  <span>送了新人</span>
                  <span>{{ item.count }}{{ item.unit }}
                  </span>
                  <span>{{ item.title }}</span>
                </div>
              </div>
              <div class="bless_content">{{item.content}}</div>
            </div>
          </div>
        </div>
      </pull-load>
    </pull-refresh>
    <transition name="fade1"><bless-message v-if="show == 1" @close_message_box="close_message" @send_message="send_message"/></transition>
    <bless-gift v-if="show == 2" @close_message_box="close_message" @bless_gift_reload="bless_gift_reload"/>
    <bottom-menu-bless @active_menu_nth="active_menu"/>
    <transition name="fade1"><love-toast v-if="toast" :message="toast_message"/></transition>
  </div>
</template>


<script>
// @ is an alias to /src
import  Vue from 'vue'
import { mapGetters, mapState } from 'vuex'
import {
  LoveButton,
  LoveLoading,
  LoveSwiper,
  BottomMenuBless,
  BlessMessage,
  BlessGift,
  BlessRedPacket,
  BlessGiftConfirm,
  LoveToast,
  PullLoad,
  PullRefresh
} from '@/components'
import waterfall from "../utils/waterfall";
import validate from "../utils/validate"
export default {
  name: 'InviteIndex',
  data() {
    return {
      toast_message: '',
      gift_confirm: false,
      lovingVue: false,
      show: 0,
      message_show: true,
      toast: false
      // 上拉加载的设置

    }
  },
  computed: {
    bless_list(){
      return this.$store.state.bless.bless_list
    },
    album_data() {
      return this.$store.state.bless.album_swiper
    }
  },
  watch: {
    bless_list() {
      this.range_init()
    }
  },
  methods: {
    bless_gift_reload: function(status) {
      this.show = 0;
      if(status) {
        this.toast_show('谢谢，新人已收到礼物',  500)
      }else{
        this.toast_show('支付失败',  500)
      }

    },
    send_message: function(data) {
      data.name = data.name.trim()
      data.content = data.content.trim()
      data.tag = 'message'
      if(data.name.length == "" || data.content.length == "")
      {
        this.toast_show('内容为空',  500)
        return;
      }
      if(data.name.length > 8)
      {
        this.toast_show('这个是名字是歪果仁的名字,我不认识',  500)
        return;
      }
      if(data.content.length > 266)
      {
        this.toast_show('超过了300字',  500)
        return;
      }
      let that = this
      document.getElementById('faceoff').style.display = ''
      this.$store.dispatch('send_message', data)
              .then(function (res) {
                if (res.data.code == 200) {
                  that.show = 0
                  document.getElementById('faceoff').style.display = 'none'
                  that.toast_show("新人已收到您的祝福啦", 1000)
                  that.$store.dispatch('get_bless_list', 'refresh')
                }
              }).catch(function (error) {
                console.log(error);
                document.getElementById('faceoff').style.display = 'none'
                that.toast_show("发送失败，请重试", 800)
              })

    },
    close_message: function(val) {
      this.show = false
    },
    active_menu: function(val) {
      this.show = val
    },
    range_init: function () {
      var that = this
      var interval
      interval = setInterval(function () {
        if(document.readyState == 'complete') {
          var grid = that.$refs.bless_container;
          if( grid ){
            waterfall(grid)
            clearInterval(interval)
          }else{
            console.log('select waterfll null')
          }
        }
      },500)

    },
    close_message_box: function (data) {
      this.message = !this.message
    },
    toast_show: function(msg, time=1000,) {
      this.toast_message = msg
      this.toast = 1
      let that = this
      setTimeout(function(){
        that.toast = 0
      },time)
    },
    loading: function () {
      var that = this
      var interval
      interval = setInterval(function () {
        if(document.readyState == 'complete') {
          document.getElementById('faceoff').style.display = ''
        }
      },500)
    },

    /**
     * 获取上拉加载的初始数据
     */

    /**
     * 下拉刷新
     */
    onRefresh (done) {
      // 如果下拉刷新和上拉加载同时使用，下拉时初始化上拉的数据
      //下拉刷新完成回调
      this.$store.dispatch('get_bless_list', 'refresh')
      done()
    },

    /**
     * 上拉加载
     */
    // 1:上拉加载更多, 2:加载中……, 3:我是有底线的
    onInfiniteLoad (val) {
      //防止多次请求
      if(this.$store.state.bless.pullUpState === 2){
        return
      }
      this.$store.commit('set_pull_up_state', 2)
      this.$store.dispatch('get_bless_list', 'load')


    }
  },
  components: {
    LoveButton,
    LoveLoading,
    LoveSwiper,
    BottomMenuBless,
    BlessGift,
    BlessMessage,
    BlessRedPacket,
    BlessGiftConfirm,
    LoveToast,
    PullLoad,
    PullRefresh
  },
  created() {
    this.$store.dispatch('get_bless_list', 'refresh')
    this.$store.dispatch('get_gift_list')
  },
  mounted() {
    var that = this
    window.addEventListener("resize", that.range_init)
    this.$store.dispatch('get_album_swiper')
            .then(function () {
              that.$refs.swiper_album.create_swiper()
            })

  },
  updated() {
    this.range_init()
  }
}
</script>

<style scoped>
  .swiper-pagination {display: none}
  .bless_index {width: 100%; height: 100%; overflow-y: hidden; }
  .bless-container { width: 98%; padding: 1%; overflow-y: hidden }
  .bless-title { color: #de5b52; font-size: 1.8rem; text-align: center; position: absolute; z-index: 3; width: 100%;line-height:4rem; height:4rem;vertical-align: middle;background: #ffffff}
  .bless-item { display: inline-block; width: 46%; background: #f5f1ff; margin: 0.8rem 2%; vertical-align: top;float: left;}
  .bless-container>.bless-item:nth-child(odd){float: left;clear: left;}
  .bless-container>.bless-item:nth-child(even){float: right;clear: right;}
  .bless-item .bless-item-padding{padding: 1.5rem;}
  .bless_item_head { display: flex; justify-content: left; align-items: center; height: 2rem; text-align: left;  }
  .bless_item_head img { height: 3rem; width: 3rem; border-radius: 100%; }
  .bless_item_head h1 {  padding-left:1rem; display: inline-block; font-size: 1.4rem; color: #484848; white-space: nowrap; overflow-x: hidden;text-overflow: ellipsis;}
  .b_item_date { font-size: 1rem; color: #7f7f7f; padding: 1rem 0 0 0;text-align: left}
  .bless_gift {display: flex; align-items: center; width: 100%;white-space: nowrap;}
  .bless_gift img {width:49%;height: auto; padding: 1%;}
  .bless_gift_count { width:44%; display: inline-flex; padding-left: 6%;flex-wrap: wrap  }
  .bless_gift_count span {   display: flex;width: 100%;flex-flow: column;height: inherit; font-size: 1.2rem; color: #dec852;white-space: initial;}
  .bless_content { text-align: left; font-size: 1.3rem; color: #5a5a5a;margin-top: 0.7rem;}
  .bless_end { text-align: center; color: #989898;font-size: 1.4rem; margin-bottom: 6.6rem;}
  .bless-index .fade1-enter-active, .bless-index .fade1-leave-active {
    transition: opacity 0.5s;
  }
  .gift-bullet {display: none}
  .bless-index .fade1-enter, .bless-index .fade1-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
